<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的简单hello world</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div>{{message}}}</div>
<div id="app">
    {{message}}
    <span>{{message}}</span>
</div>

<div class="app">
    {{message1}}
    <span>{{message1}}</span>
</div>

<div class="app">
    {{message1}}
    <span>{{message1}}</span>
</div>
</body>
<script>

    /**
     * 功能:
     *      使用vue.js做一个简单的demo实验.
     * 说明:
     *      1. 插值表达式的作用域为: el钩子命中的元素以及其子元素中.
     *          - 在命中的元素之外差值表达式时无效的.
     *      2. 钩子不应该放置在body上, 使用div作为合适的挂载点.
     */
    let vue = new Vue({
        //Dom元素选择器, 遵循css选择器规则
        el: '#app',
        data: {
            message: 'hello world'
        }
    });

    /**
     * 功能:
     *      验证vue是否可以通过类选择器来选择元素.
     * 说明:
     *      1. 从浏览器的输出结果中发现, 是可以使用类进行选择元素的, 但是最终的作用域只有第一个元素; 第二个元素中不生效.
     *          - 所以不推荐使用类选择器或者标签选择器, 会造成选择会乱, 更应该使用id选择器.
     */
    let vue1 = new Vue({
        el: '.app',
        data: {
            message1 : '使用类选择器'
        }
    });

</script>
</html>